<template>
  <div class="emptynestChildren">
    <div class="scroll-container">
      <div class="list list1">
        <div v-for="(item, index) in list1" :key="index" class="listItem">
          <div class="item">
            <div class="title" :style="{ color: getColor(index) }">{{ item.title }}合计</div>
            <div class="num">{{ item.num }}人</div>
          </div>
        </div>
      </div>
      <div class="line" />
      <div class="list list2">
        <div v-for="(item, index) in list2" :key="index" class="listItem">
          <div class="item">
            <div class="title" :style="{ color: getColor(index) }">{{ item.title }}合计</div>
            <div class="num">{{ item.num }}人</div>
          </div>
        </div>
      </div>
      <div class="line" />
      <div class="list list3">
        <div v-for="(item, index) in list3" :key="index" class="listItem">
          <div class="item">
            <div class="title" :style="{ color: getColor(index) }">{{ item.title }}合计</div>
            <div class="num">{{ item.num }}人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  mixins: [],
  props: {
    list1: {
      type: Array,
      default: () => []
    },
    list2: {
      type: Array,
      default: () => []
    },
    list3: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      colorList: ['#C1C1C1', '#6ACBE5', '#9A7DFA', '#6dcde6', '#10f6de', '#2848de', '#9a7dfa', '#feffff']
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getColor(i) {
      return this.colorList[i]
    }
  }
}
</script>

<style lang="scss" scoped>
.emptynestChildren {
  position: relative;
  z-index: 99999;
  padding: 20px 20px 0 60px;
  .scroll-container {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    width: 100%;
  }
  .list {
    display: flex;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0; /* 防止在垂直方向上被压缩 */
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 10px;
      padding-bottom: 6px;
      flex: 0 0 auto;
      white-space: nowrap;
      .title {
        margin-bottom: 10px;
        padding: 6px 20px;
        text-align: center;
        color: #FEFFFF;
        font-size: 18px;
        background: url('~@/assets/bigScreen/kclrjzzk.png') center no-repeat;
      }
      .num {
        color: #FEFFFF;
        font-size: 24px;
      }
    }
  }
  .line {
    background: url('~@/assets/bigScreen/kclrjzzkline.png') center no-repeat;
    width: 100%;
    height: 2px; /* 设置线条高度 */
    margin: 6px 0; /* 设置线条与列表的间距 */
  }
}
::-webkit-scrollbar-track {
  background: #006d75;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #3ec9d3;
  border-radius: 10px;
}
::-webkit-scrollbar {
  height: 5px;
}
</style>
